<script setup>
import SplitLine from './SplitLine.vue'

// 以下代码不要动
import { themeChange } from 'theme-change'
import { onMounted } from 'vue'

onMounted(() => {
  // 将在html标签上生成data-theme属性，幷在本地存储
  themeChange(false)
})
// 以上代码不要动
</script>

<template>

  <!-- Buttons -->
  <div>
    <!-- data-set-theme属性值用于切换主题 -->
    <button data-set-theme="light" class="btn">Default</button>
    <button data-set-theme="dark" class="btn">Dark</button>
    <button data-set-theme="halloween" class="btn">Halloween</button>
  </div>
  <SplitLine text="Theme Change Examples" :isLower="true" />

  <!-- Toggle -->
  <div>
    <!-- data-toggle-theme属性值用于切换主题 -->
    <button data-toggle-theme="light,dark" class="btn">点击切换主题</button>
  </div>
  <SplitLine text="Theme Change Examples" :isLower="true" />
  <!-- Toggle -->
  <div class="m-5">
    <!-- data-toggle-theme属性值用于切换主题 -->
    🌞
    <div class="inline-block w-10">
      <div data-toggle-theme="light,dark" data-act-class="pl-4" class="border rounded-full border-green-700 flex items-center cursor-pointer w-10 transition-all duration-300 ease-in-out pl-0">
        <div class="rounded-full w-3 h-3 m-1 bg-green-700"></div>
      </div>
    </div>
    🌚
  </div>
  <SplitLine text="Theme Change Examples" :isLower="true" />

  <!-- Select -->
  <select data-choose-theme>
    <!-- data-choose-theme子元素option的value属性值用于切换主题 -->
    <option value="light">Default</option>
    <option value="dark">Dark</option>
    <option value="halloween">Halloween</option>
  </select>

</template>

<style scoped>
</style>
